Vue 实例与 MVVM

MVVM

MVVM是Model-View-ViewModel的缩写，即模型-视图-视图模型，MVVM最早是由微软所提出，主要借鉴了MVC的思想，前端页面中，将模型用Javascript对象表示，View负责显示，而将模型与视图关联起来的叫 ViewModel，ViewModel负责将模型数据同步到视图显示。

如果说到Vue前面为什么要举那么多修改DOM的例子，那无非就是之为读者学习 Vue 实例所铺路，虽然Vue并没有完全的遵守 MVVM模型但是Vue受到了启发。

如果你说jquery与vue来修改DOM节点的区别那么我们可以使用以下例子来进行分别，你会发现vue的确是受到了 MVVM 的启发：

jquery

1
2

var name = 'jquery';
$('#name').text(name);

MVVM

1
2
3
4
5
6
7
8
9
10
11
12

var person = {
    name: 'Bart',
};
```    
当改变 JavaScript对象的时候，也将会导致DOM结构或数据作出相应的变化，MVVM的出现让我们的从如何操作DOM变成了**如何改变JavaScript**对象数据或状态，这也是MVVM的设计思想之一。

## 创建一个 Vue 实例
Vue的应用创建可以通过 Vueh函数来创建一个新的实例开始，如:
```vue
            var vm = new Vue({
                // code
            })

虽然 Vue并没有完全遵循 MVVM模型，但是其设计也收到了启发，所以在其官方文档中依然会使用vm即（ViewModel）缩写来作为 Vue 的实例。

数据与方法

在Vue实例被创建的时候，他会将 data对象中的所有属性加入到 vue内，当这些属性的值发生改变的时候，试图将会产生一个响应，来匹配更新为新的值：

1
2
3
4
5
6

var vm = new Vue({
    el: "#app",
    data: {
        message: 'Hello,world'
    }
})

当这些数据被改变的时候，视图会进行重新渲染

只有当实例被创建的时候就已经存在data中的属性才是响应式的，如果你在控制台内想新添加一个属性，且一开始他为空且不存在，那么将不会触发任何的视图更新，此时需要设置初始值，详情可以查看官方文档内的 : https://vuejs.bootcss.com/guide/instance.html 章节。

当然有了初始值，以及修改的，自然会出现一个组织修改现有属性的方法即Object.freeze()，即:

1
2
3
4
5
6
7

var vm = new Vue({
    el: "#app",
    data: {
        message: 'Hello,world'
    }
})
Object.freeze(vm)